<template>
  <moduleHeader
    :active="0"
    :buttonGroup="buttonGroup"
    @handleMenu="handleMenu"
    :layoutHeight="''"
    activeMinWidth="1rem"
    :buttonStyle="buttonStyle"
    :rightStyle="rightStyle"
    :timeStyle="timeStyle"
    :iconStyle="iconStyle"
  ></moduleHeader>
  <moduleLayout>
    <template v-slot:content-2>
      <moduleAppMoniter
        :modalStyle="modalStyle"
        :isWaterfall="true"
        v-bind="appMonitorData"
        :warningValue="warningValue"
        @changeTab="changeWarningTab"
      ></moduleAppMoniter>
    </template>
    <template v-slot:content-3>
      <moduleUserVisitor
        :usercount="usercount"
        :userAccess="userAccess"
      ></moduleUserVisitor>
    </template>
    <template v-slot:content-4>
      <moduleActiveUser
        height="100%"
        :chartType="chartType"
        :userValue="userValue"
        :moduleUserValue="moduleUserValue"
        :chartData="userData.chartData"
        @changeUserTab="changeTab"
        @changeModuleTab="changeModuleTab"
      ></moduleActiveUser>
    </template>
    <template v-slot:content-5>
      <moduleBaseNew
        :options="options"
        :defaultValue="defaultValue"
        :deviceNum="deviceNum"
        v-bind="baseData"
        @onChangeTab="onChangeTab"
      ></moduleBaseNew>
    </template>
    <template v-slot:content-6>
      <moduleBugView :bugData="bugData" :bugList="bugList"></moduleBugView>
    </template>
    <template v-slot:content-7>
      <moduleBnsOpertaion
        class="largescreen-container"
        v-bind="bnsData"
        :chartType="bnsChartType"
        @updateChart="updateChart"
        height="5.89rem"
      ></moduleBnsOpertaion>
    </template>
    <template v-slot:content-8>
      <moduleUserView
        :traceData="traceData"
        v-bind="traceData"
        :userChartData="userChartData"
      ></moduleUserView>
    </template>
    <template v-slot:content-9>
      <moduleTrace
        :traceData="traceData"
        v-bind="traceData"
        :chartType="traceChartType"
      ></moduleTrace>
    </template>
  </moduleLayout>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import moduleBugView from "@/pages/components/bug-view/index.vue";
import moduleLayout from "@/pages/largescreen/component/vpt-layout.vue";
import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleUserVisitor from "@/pages/components/user-visitor-1001/index.vue";
import moduleActiveUser from "@/pages/components/active-user/index.vue";
import moduleBnsOpertaion from "@/pages/components/bnsOpertaion/index.vue";
import moduleAppMoniter from "@/pages/components/appMoniter/index.vue";
import moduleBaseNew from "@/pages/components/baseNew-1002/index.vue";
import moduleUserView from "@/pages/components/user-view/index.vue";
import moduleTrace from "@/pages/components/trace-1002/index.vue";
import { USER_DATA } from "@/mock/index.js";
import {
  baiscInformation,
  baiscAppOptions,
  getOperationMaintenance,
  getMonitorTotal,
  getMonitoringOverview,
  getUserAccess,
  userVisitTrend,
  bugTotal,
  bugTableList,
  businessActualTimeLog,
  demandInfoData,
  demandLog,
  demandDateTime,
  usersBarChart,
  getDemandRankBarTotal,
  userAccessCount,
  baiscDeviceNum,
} from "@/api/mockApi/largescree.js";
import { useRouter } from "vue-router";

const router = useRouter();

const buttonGroup = ref([
  // { id: 1, name: "总览", path: "/largescreen", disabled: false },
  // { id: 2, name: "基础设施监控", path: "", disabled: true },
  // { id: 3, name: "应用监控", path: "", disabled: true },
]);

const handleMenu = (item) => {
  // console.log("item", item);
  router.push({ path: item.path });
};

const chartType = ref("init");
const bnsChartType = ref("init");
const traceChartType = ref("init");

// console.log("USER_DATA:", USER_DATA);

const modalStyle = {
  // top: "22%",
  width: "7.5rem",
  maxHeight: "7.5rem",
  padding: "0.24rem",
};
const rightStyle = {
  right: "0.2rem",
  top: "0.36rem",
};

const timeStyle = {
  fontSize: "0.16rem",
};
const iconStyle = {
  height: "0.16rem",
  width: "0.16rem",
  top: " 0.02rem",
};
const buttonStyle = {
  // width: "2.5rem",
  fontSize: "0.25rem",
  height: "0.5rem",
  lineHeight: "0.5rem",
  marginRight: "0.2rem",
  padding: "0 0.3rem",
  "--min-width": "1rem",
};

const bnsData = reactive({
  info: {},
  chartData: [],
  dataOptions: {
    dvModel: 2, //布局模式
    dvContentStyle: "display:flex;",
    dvMainFontSize: "0.16rem",
    dvUsealFontSize: "0.14rem",
    dvFontSize: "0.18rem",
  },
  chartOptions: {
    model: "3",
    select: {
      width: 1,
      time: {
        labelWidth: "0.3rem",
      },
      bns: {
        labelWidth: "0.6rem",
      },
      scope: {
        labelWidth: "0.3rem",
      },
    },
    grid: {
      top: 20,
    },
    legendProps: {
      top: 0,
    },
  },
});

const appMonitorData = reactive({
  totalData: {},
  appMonitorList: [],
});

const warningValue = ref("01");

const changeWarningTab = (value) => {
  // console.log("value:", value);
  warningValue.value = value;
  yyjkzsRequest.stopFetching();
  yyjkglRequest.stopFetching();
  yyjkzsRequest.updateParams({ type_code: warningValue.value }); // 更新参数
  yyjkglRequest.updateParams({ type_code: warningValue.value }); // 更新参数
  yyjkzsRequest.startFetching();
  yyjkglRequest.startFetching();
};

const getYyjkzsDataList = (params) => {
  getMonitorTotal(params).then((res = {}) => {
    appMonitorData.totalData = res.data && res.data.length ? res.data[0] : {};
  });
};

// 应用总览概况
const getYyjkglDataList = (params) => {
  getMonitoringOverview(params).then((res) => {
    appMonitorData.appMonitorList = res.data || [];
  });
};

// 获取用户访问数据
const userAccess = ref({});

const getUserAccessViews = (params = {}) => {
  getUserAccess(params).then((res) => {
    userAccess.value = res.data && res.data.length ? res.data[0] : {};
  });
};

//用户访问在线访问人次
const usercount = ref({});
const getUserAccessCount = () => {
  userAccessCount().then((res) => {
    usercount.value = res ? res : {};
  });
};

// 运行趋势
const userData = reactive({
  chartData: {
    legendData: [],
    xData: [],
    value: [],
  },
});

const moduleUserValue = ref("01");
const userValue = ref("01");

// 重置图表
const resetChartData = () => {
  userData.chartData.legendData = [];
  userData.chartData.xData = [];
  userData.chartData.value = [];
};

const changeModuleTab = (value) => {
  // console.log("value:changeModuleTab", value);
  moduleUserValue.value = value;
  yxqsRequest.stopFetching();
  resetChartData();
  chartType.value = "init";
  yxqsRequest.updateParams({
    type_code: userValue.value,
    app_code: moduleUserValue.value,
  });
  yxqsRequest.startFetching();
};
const changeTab = (value) => {
  // console.log("value:changeTab", value);
  userValue.value = value;
  yxqsRequest.stopFetching();
  resetChartData();
  chartType.value = "init";
  yxqsRequest.updateParams({
    type_code: userValue.value,
    app_code: moduleUserValue.value,
  });
  yxqsRequest.startFetching();
};

const getUserVisitTrend = (params) => {
  userVisitTrend(params).then((res = {}) => {
    const data = res.data && res.data.length ? res.data : [];
    const times = [...new Set(data.map((item) => item.time))];
    times.sort(); // 确保时间顺序正确
    // 获取所有不同的类别名称
    const legendData = [...new Set(data.map((item) => item.name))];
    let value = [];
    // 创建一个二维数组来存储每个时间点上的所有类别值
    const valueMatrix = times.map((time) => {
      return legendData.map((category) => {
        const entry = data.find(
          (entry) => entry.time === time && entry.name === category
        );
        return entry ? parseInt(entry.value, 10) : null;
      });
    });
    // 将 valueMatrix 转换为所需的格式
    for (let i = 0; i < legendData.length; i++) {
      let newRow = [];
      for (let j = 0; j < times.length; j++) {
        newRow.push(valueMatrix[j][i]);
      }
      value.push(newRow);
    }
    userData.chartData.legendData = legendData;
    userData.chartData.xData = times;
    userData.chartData.value = value;

    setTimeout(() => {
      chartType.value = "update";
    }, 1000);
    // setTimeout(() => {
    //   userData.chartData.legendData = [
    //     "数字魔方",
    //     "技术中台",
    //     "预算一体化",
    //     "dijawhdj",
    //     "hhh",
    //     "gggg",
    //     "uoiui",
    //     "hidhnkjh",
    //     "hghgfjkhg",
    //     "hkjhj",
    //     "lkjlkjk",
    //     "jlkjlkj",
    //     "ggggf",
    //     "uoiuif",
    //     "hidhnkjhf",
    //     "hghgfjkhgf",
    //     "hkjhjf",
    //     "lkjlkjkf",
    //     "jlkjlkjf",
    //     "哈哈哈1",
    //     "哈哈哈2",
    //     "哈哈哈3",
    //     "哈哈哈4",
    //     "哈哈哈5",
    //     "哈哈哈6",
    //     "哈哈哈7",
    //     "哈哈哈8",
    //     "哈哈哈9",
    //     "哈哈哈0",
    //     "哈哈哈6789",
    //   ];
    //   userData.chartData.xData = ["00:00", "00:01", "00:02", "00:03"];
    //   // userData.chartData.value = value;
    //   userData.chartData.value = [
    //     [7, 89, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 28, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 68, 9, 7, 4, 66, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //     [7, 8, 9, 7, 4, 6, 5, 4, 6, 5, 4, 1, 3, 2, 1],
    //   ];
    // }, 3000);
  });
};

// 获取基础设施应用
const options = reactive([]);
const defaultValue = ref("00");

const getBaiscAppOptions = (params = {}) => {
  baiscAppOptions(params).then((res) => {
    const data = res.data && res.data.length ? res.data : [];
    data.map((item) => {
      options.push({
        label: item.app_type,
        value: item.app_type_code,
      });
    });
    defaultValue.value = data[0].app_type_code;
  });
};

const deviceNum = ref([]);
// 基础设施设备数量
const getBaiscDeviceNum = (params = {}) => {
  baiscDeviceNum(params).then((res) => {
    deviceNum.value = res.data && res.data.length ? res.data[0] : [];
  });
};

// 获取基础设施数据
const baseData = reactive({
  baseInfo: {},
});

const onChangeTab = (value) => {
  // console.log("onChangeTab", value);
  defaultValue.value = value;
  baseInfoRequest.stopFetching();
  baseInfoRequest.updateParams({ app_type_code: defaultValue.value }); // 更新参数
  baseInfoRequest.startFetching();
};

const getBaiscInformation = (params) => {
  baiscInformation(params).then((res = {}) => {
    const info = res.data && res.data.length ? res.data[0] : {};
    for (const key in info) {
      info[key] = JSON.parse(info[key] || "{}");
    }
    baseData.baseInfo = info || {};
  });
};

// 缺陷总览
const bugData = ref({});

const getBugTotal = (params = {}) => {
  bugTotal(params).then((res) => {
    bugData.value = res.data && res.data.length ? res.data[0] : {};
  });
};

// 缺陷列表
const bugList = ref([]);

// 缺陷列表分页
// const handelePage = (value) => {
//   pageNum.value = value;
//   getBugList({ page_num: value, page_size: 10 });
// };

const getBugList = (params = {}) => {
  bugTableList(params).then((res) => {
    bugList.value = res.data && res.data.length ? res.data : [];
  });
};

const chartParams = ref({
  data_code: "01",
  mof_code: "01",
});
const updateChart = (params) => {
  // console.log("updateChart", params);
  chartParams.value = params;
  bnsRequest.stopFetching();
  bnsRequest.startFetching();
};

// 获取业务运维数据
const getDataList = () => {
  getOperationMaintenance(chartParams.value).then((res) => {
    const { success, data = [] } = res || {};
    // if (success) {
    if (data.length) {
      (bnsData.info = {
        num_businesss: data[0].num_businesss,
        num_businesss_sbj: data[0].num_businesss_sbj,
        num_question: data[0].num_question,
        num_question_sbj: data[0].num_question_sbj,
      }),
        (bnsData.chartData = JSON.parse(data[0].data_zst || "[]"));
      setTimeout(() => {
        bnsChartType.value = "update";
      }, 1000);
    }
    // }
  });
};

//人员柱状图

const userChartData = ref([]);
const getUsersBarChart = (params = {}) => {
  usersBarChart(params).then((res) => {
    userChartData.value = res.data && res.data.length ? res.data : [];
  });
};

// 业务实时日志
const actualTimeLog = ref([]);

// const logPageNum = ref(1);
// const logTotal = ref(0);
// const changePage = (value) => {
//   logPageNum.value = value;
//   getBusinessActualTimeLog({ page_num: value, page_size: 10 });
// };

const getBusinessActualTimeLog = (params = {}) => {
  businessActualTimeLog(params).then((res) => {
    actualTimeLog.value = res.data && res.data.length ? res.data : [];
  });
};

//需求跟踪
const traceData = reactive({
  traceInfo: {},
  traceList: [],
  barData: [],
  rankData: [],
});

// 需求总览
const getDemandInfoData = (params = {}) => {
  demandInfoData(params).then((res) => {
    traceData.traceInfo = res.data && res.data.length ? res.data[0] : {};
  });
};

// 需求研发日志

// const tracePageNum = ref(1);

// const traceChangePage = (value) => {
//   tracePageNum.value = value;
//   getDemandLog({ page_num: value, page_size: 10 });
// };
const getDemandLog = (params = {}) => {
  demandLog(params).then((res) => {
    traceData.traceList = res.data && res.data.length ? res.data : [];
  });
};

// 需求停留平均天数
const getDemandDateTime = (params = {}) => {
  demandDateTime(params).then((res) => {
    traceData.barData = res.data && res.data.length ? res.data : [];
    setTimeout(() => {
      traceChartType.value = "update";
    }, 1000);

    // setTimeout(() => {
    //   traceData.barData = [
    //     {
    //       module: "项目库管理",
    //       days: "23",
    //       type: "开发",
    //     },
    //     {
    //       module: "预算执行",
    //       days: "19",
    //       type: "开发",
    //     },
    //     {
    //       module: "预算批复与调整调剂",
    //       days: "21",
    //       type: "开发",
    //     },
    //     {
    //       module: "项目库管理",
    //       days: "26",
    //       type: "测试",
    //     },
    //     {
    //       module: "预算执行",
    //       days: "24",
    //       type: "测试",
    //     },
    //     {
    //       module: "预算批复与调整调剂",
    //       days: "20",
    //       type: "测试",
    //     },

    //     {
    //       module: "项目库管理",
    //       days: "26",
    //       type: "需求",
    //     },
    //     {
    //       module: "预算执行",
    //       days: "22",
    //       type: "需求",
    //     },
    //     {
    //       module: "预算批复与调整调剂",
    //       days: "14",
    //       type: "需求",
    //     },
    //   ];
    // }, 1000);
  });
};

// 需求跟踪排行
const getXqgzpmtDataList = (params = {}) => {
  getDemandRankBarTotal(params).then((res) => {
    traceData.rankData = (res.data || []).map((item) => {
      return {
        name: item.mof_div_dep,
        value: item.demand_num,
      };
    });
  });
};

// 轮询函数
// const pollData = () => {
//   getUserVisitTrend({
//     type_code: userValue.value,
//     app_code: moduleUserValue.value,
//   });
// };

// let pollingInterval = null;

// 初始化数据
// const init = () => {
const params = {};
const tabsParams = ref({
  type_code: userValue.value,
  app_code: moduleUserValue.value,
});

const yyjkzsRequest = usePeriodicRequest(getYyjkzsDataList, 3000, {
  type_code: warningValue.value,
});
const yyjkglRequest = usePeriodicRequest(getYyjkglDataList, 3000, {
  type_code: warningValue.value,
});
const yhfwRequest = usePeriodicRequest(getUserAccessViews, 3000, params);
const countRequest = usePeriodicRequest(getUserAccessCount, 3000, params);
const yxqsRequest = usePeriodicRequest(getUserVisitTrend, 3000, {
  type_code: userValue.value,
  app_code: moduleUserValue.value,
});
// const yxqsRequest = usePeriodicRequest(getUserVisitTrend, 3000, tabsParams.value);
const baseInfoRequest = usePeriodicRequest(getBaiscInformation, 3000, {
  app_type_code: defaultValue.value,
});
const qxzlRequest = usePeriodicRequest(getBugTotal, 3000, params);
const qxlbRequest = usePeriodicRequest(getBugList, 3000, params);
const bnsRequest = usePeriodicRequest(getDataList, 3000, params);
const ryqkzztRequest = usePeriodicRequest(getUsersBarChart, 3000, params);
// const { startFetching: startFetchingrYqkzzt } = usePeriodicRequest(
//   getXqgzDataList(),
//   3000,
//   params
// );
const ywlogRequest = usePeriodicRequest(getBusinessActualTimeLog, 3000, params);
const xqgzRequest = usePeriodicRequest(getDemandInfoData, 3000, params);
//
const xqlogRequest = usePeriodicRequest(getDemandLog, 3000, params);

const xqtltsRequest = usePeriodicRequest(getDemandDateTime, 300000, params);
const xqgzpmtRequest = usePeriodicRequest(getXqgzpmtDataList, 3000, params);

// };
// 监听用户值的变化
// watch([() => userValue.value, () => moduleUserValue.value], ([typeCode, appCode]) => {
//   operatingTrendRequest.stopFetching();
//   operatingTrendRequest.startFetching({ type_code: typeCode, app_code: appCode });
// }, { immediate: true, deep: true });

onMounted(() => {
  // init();
  yyjkzsRequest.startFetching();
  yyjkglRequest.startFetching();
  yhfwRequest.startFetching();
  countRequest.startFetching();
  yxqsRequest.startFetching();
  // xzyyRequest.startFetching();
  baseInfoRequest.startFetching();
  qxzlRequest.startFetching();
  qxlbRequest.startFetching();
  bnsRequest.startFetching();
  ryqkzztRequest.startFetching();
  ywlogRequest.startFetching();
  xqgzRequest.startFetching();
  xqlogRequest.startFetching();
  xqtltsRequest.startFetching();
  xqgzpmtRequest.startFetching();
  getBaiscAppOptions();
  getBaiscDeviceNum();
});

// 在组件卸载时停止请求
onBeforeUnmount(() => {
  yyjkzsRequest.stopFetching();
  yyjkglRequest.stopFetching();
  yhfwRequest.stopFetching();
  countRequest.stopFetching();
  yxqsRequest.stopFetching();
  // xzyyRequest.stopFetching();
  baseInfoRequest.stopFetching();
  qxzlRequest.stopFetching();
  qxlbRequest.stopFetching();
  bnsRequest.stopFetching();
  ryqkzztRequest.stopFetching();
  ywlogRequest.stopFetching();
  xqgzRequest.stopFetching();
  xqlogRequest.stopFetching();
  xqtltsRequest.stopFetching();
  xqgzpmtRequest.stopFetching();
});
</script>

<style lang="less" scoped>
.largescreen-container {
  :deep(.sm-data-echarts-layout) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
</style>
